import * as echarts from 'echarts';
import { useEffect } from 'react'
import React from 'react';
const Linear = (prpos) => {
  const { data = [] } = prpos
  const option2 = {
    //  backgroundColor: '#00265f',
    grid: {
      left: '1%',
      top: '20%',
      right: '0%',
      bottom: '20%',
      containLabel: true
    },//饼图不受grid影响
    tooltip: {
      trigger: 'axis',//折线图柱状图:axis,饼图:item
      axisPointer: {
        type: 'shadow'
      },
      formatter: (data) => {
        console.log(data);
        return `${data[0].axisValue}<br/>
        ${data.map(v => ('<span style="color:' + v.color + '"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + v.color + ';"></span>' + v.seriesName + '：' + v.data + '</span><br/>')).join('')}`
        // return `${'<span style="color:' + data.color + '"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + data.color + ';"></span>' + data.name + '：' + data.percent+'%('+data.value + ')</span><br/>'}`
      },
    },
    xAxis: [{
      type: 'category',
      data: data.map(v => v.label),
      axisLine: {
        show: true,
        textStyle: {
          fontSize: 10
        },
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        splitNumber: 15,
        color: "#fff",
        fontSize: 8,
        // rotate: 50, // 倾斜度
      },
      // inverse: false, // x轴反转(一般与realtimeSort排序时连用)
      // max: 4 // 仅显示最大的5个
      // axisTick: { // x轴刻度线
      //   show: false,
      // },
    }],
    yAxis: [{
      type: 'value',
      axisLabel: {
        show: true,
        color: "rgba(255,255,255,.6)",
        fontSize: '12',
        formatter: '{value}',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      },
      max: 'dataMax', // 最大值
      // axisTick: {  // y轴刻度线
      //   show: false,
      // },
    }],
    legend: {
      left: 'left',// 水平位置
      itemWidth: 20,
      itemHeight: 10,
      formatter: function (name) {
        return `{a|${name}}`
      },
      textStyle: { // 图例文字的样式
        rich: {
          a: {
            color: ['rgb(65,198,252)', 'rgb(82,198,53)', 'rgb(236,225,91)']
          }
        }
      }
      // top: 'bottom',// 垂直位置
      // orient: 'vertical',// 横纵布局
    },
    // 动画配置
    // animationDuration: 3000,
    // animationDurationUpdate: 3000,
    // animationEasing: 'linear',
    // animationEasingUpdate: 'linear',
    series: [
      {
        name: '产品问题',
        type: 'line',//柱形图:bar,饼图:pie
        smooth: true,
        data: data.map(v => v.value),
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(65,198,252,.8)'
          }, {
            offset: 0.8,
            color: 'rgba(65,198,252,0)'
          }], false),
          shadowBlur: 10
        },
        // data: data.map(v => ({ name: v.label, value: v.value })),//饼图数据格式
        // radius: '80%', //饼图大小
        // center: ['50%', '50%'], //饼图位置
        // realtimeSort: true,// 实时排序
        // barWidth: '15%', //柱子宽度
        // itemStyle: {     //柱子样式
        //   color: 'rgb(65 198 252)',
        //   opacity: 1,
        //   borderRadius: 5,
        // },
        // label: {   //数值样式
        //   show: true,
        //   position: 'top',
        //   valueAnimation: true
        // }
      }, {
        name: '服务问题',
        type: 'line',
        smooth: true,
        data: data.map(v => v.value2),
        itemStyle: {
          color: 'rgb(82,198,53)',
          opacity: 1,
          borderRadius: 5,
        },
        realtimeSort: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(82,198,53,.8)'
          }, {
            offset: 0.8,
            color: 'rgba(82,198,53,0)'
          }], false),
          shadowBlur: 10
        },
      },
      {
        name: '价格问题',
        type: 'line',
        smooth: true,
        data: data.map(v => v.value3),
        itemStyle: {
          color: 'rgb(236 225 91)',
          opacity: 1,
          borderRadius: 5,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(236,225,91,.8)'
          }, {
            offset: 0.8,
            color: 'rgba(236,225,91,0)'
          }], false),
          shadowBlur: 10
        },
      }
    ],
  };

  useEffect(() => {
    if (!data.length) return
    var myChart2 = echarts.init(document.getElementById('Linear'));
    myChart2.setOption(option2);
    window.addEventListener("resize", function () {
      myChart2.resize();
    });
  }, [data])

  return (
    <>
      <div className="allnav" id="Linear" style={{ width: '100%', height: '140px' }}></div>
    </>
  )
}

export default Linear